<template>
  <div class="login">

      <div class="header">
        <img src="../../assets/images/logo.png" alt="">
      </div>
      <div class="login-con">
        <div class="img-wrap">
          <img class="login-title" src="../../assets/images/login-title.png" />
        </div>
        <Card>
          <div class="form-con">
            <Form ref="loginForm" :model="form" :rules="rules">
              <Tabs v-model="tabsName">
                <TabPane label="登录" name="name1">
                  <Card :bordered="false">
                    <br>
                    <FormItem prop="phone" class="martop">
                      <Input v-model="form.phone" autofocus placeholder="请输入手机号"></Input>
                    </FormItem>
                    <br>
                    <FormItem prop="password">
                      <Input type="password" v-model="form.password" placeholder="请输入密码" @keyup.enter.native="submit"></Input>
                    </FormItem>
                    <br>
                    <FormItem>
                      <Button @click="submit" :disabled='isDisabled' type="primary" style="width: 96px;height: 40px;">立即登录</Button>
                      <span @click="forgetPass" class="forGetPassword">忘记密码</span>
                    </FormItem>
                    <!--<iframe frameborder=0 width=100%  height=550  marginheight=100 marginwidth=100-->
                            <!--runat="server"-->
                            <!--id="iframeId"-->
                            <!--allowtransparency="yes"-->
                            <!--scrolling=no src="http://accounts.ahjdev.top/login/identifier?referer=http://lyz.ahjdev.top"-->
                    <!--&gt;</iframe>-->
                  </Card>

                </TabPane>

                <TabPane label="注册" name="name2">
                  <Card :bordered="false">
                    <Form ref="formValidateNew" :model="formValidateNew" :rules="ruleValidate" class="registerStyle">
                      <FormItem prop="phone">
                        <Input v-model="formValidateNew.phone" placeholder="手机号码"></Input>
                      </FormItem>
                      <br>
                      <FormItem prop="code">
                        <Input v-model="formValidateNew.code" placeholder="短信验证码">
                          <span class="getpass" @click="getCode" slot="append">获取验证码</span>
                        </Input>
                      </FormItem>
                      <br>
                      <FormItem prop="password">
                        <Input type="password" v-model="formValidateNew.password" placeholder="设置密码" @on-click="close" icon="ios-clock-outline"></Input>
                      </FormItem>
                      <br>
                      <FormItem>
                        <Button type="primary" @click="handleSubmit()">立即注册</Button>
                      </FormItem>
                    </Form>
                  </Card>

                </TabPane>
              </Tabs>
            </Form>
          </div>
        </Card>
      </div>
      <div class="footer">
        Copyright © 2018 www.anhuanjia.com All Rights Resreved | 京ICP备13038154号-6 安环家荣誉出品
      </div>
        <Modal
            v-model="modal1"
            title="忘记密码"
            @on-ok="ok"
            @on-cancel="cancel">

            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
              <FormItem prop="phone">
                <Input v-model="formValidate.phone" placeholder="手机号码"></Input>
              </FormItem>
              <br>
              <FormItem prop="code">
                <Input v-model="formValidate.code" placeholder="短信验证码">
                  <span class="getpass" @click="getCodeForget" slot="append">获取验证码</span>
                </Input>
              </FormItem>
              <br>
              <FormItem prop="password">
                <Input type="password" v-model="formValidate.password" placeholder="设置新密码" @on-click="close" icon="ios-clock-outline"></Input>
              </FormItem>
              <br>
              <FormItem>
                <Button type="primary" @click="changePassWord()">修改密码</Button>
              </FormItem>
            </Form>
        </Modal>
  </div>
</template>

<script>
import libs from "../../libs/uploads";
export default {
  data() {
    // 手机号验证
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else if (!/^((1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}))$/.test(value)) {
        callback(new Error("电话格式不正确"));
      } else {
        callback();
      }
    };
    return {
      isDisabled: false,
      tabsName: 'name1',
      form: {
        phone: "",
        password: ""
      },
      formValidate: {
        phone: "",
        password: "",
        code: ""
      },
      // 注册
      formValidateNew: {
        phone: "",
        password: "",
        code: ""
      },
      ruleValidate: {
          phone: [
          {
            validator: validatePhone,
            trigger: "blur"
          }
        ],
          code: [
          {
            required: true,
            message: "验证码不能为空",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },{min:6,message:'请输入最少6位'}
        ]
      },
      modal1: false,
    };
  },
  computed: {
    rules() {
      return {
        phone: {
          required: true,
          message: "账号不能为空",
          trigger: "blur"
        },
        password: {
          required: true,
          message: "密码不能为空",
          trigger: "blur"
        }
      };
    }
  },
  methods: {
    // ...mapActions([
    //   'signIn',
    // ]),
    ok(){
        this.formValidate.phone="";
        this.formValidate.code="";
        this.formValidate.password="";
    },
    cancel(){},
    // 忘记密码
    getCodeForget() {
      if(!this.formValidate.phone) {
        this.$Message.error('请输入手机号')
        return 
      }
      axios.post('/verifycode/send',{
          identifier: this.formValidate.phone,
          biz:'ForgetVerifyCode'
      }).then((res)=>{
        console.log(res)
        if(res._MESSAGE == "手机号不存在"){
          this.$Message.error(res._MESSAGE)
        }else if(res._STATUS == 1){
          this.$Message.success("验证码发送成功")
        }
      }).catch((err)=>{
        console.log(err)
      })
    },
    //修改密码
    changePassWord()　{
      this.$refs.formValidate.validate(valid => {
        if (valid) {
          axios.post('/verifycode/check',{
              identifier:this.formValidate.phone,
              code:this.formValidate.code,
          }).then((res)=>{
            if(res._STATUS ==1){
              axios.post('/member/forgetpwd/reset',{
                identifier:this.formValidate.phone,
                password: this.formValidate.password,
                token: res.token
              }).then(response=>{
                if(response._STATUS==1) {
                  this.$Message.success(response._MESSAGE)
                }else {
                  this.$Message.success(response._MESSAGE)
                }
                this.formValidate.phone = ''
                this.formValidate.password = ''
                this.formValidate.code =''
              })
            }else{
              this.$Message.error(res._MESSAGE);
            }
          }).catch((err)=>{
            console.log(err)
          })
        } else {
          this.$Message.error("请填写完整!");
        }
      });
    },
    // 注册
    getCode(){            //获取验证码
      axios.post('/verifycode/send',{
          identifier: this.formValidateNew.phone,
          biz:'RegistVerifyCode'

      }).then((res)=>{
        // console.log(res)
        if(res._MESSAGE == "手机号已经被占用"){
          this.$Message.error(res._MESSAGE)
        }else if(res._STATUS == 1){
          this.$Message.success('验证码发送成功！')
        } else if(res._STATUS == 0) {
          this.$Message.success(res._MESSAGE)
        }
      }).catch((err)=>{
      console.log(err)
      })
    },
    close() {
      // console.log("asdfasdf");
    },
    submit() {
      this.$refs.loginForm.validate(valid => {
        console.log(valid);
        if (valid) {
          this.isDisabled = true
          let info = this.form;
          axios
            .post("/member/challenge", {
            // .post("/member/ajaxlogin", {
              UserName: info.phone,
              Password: info.password
            })
            .then(res => {
              if (!res.status) {
                this.$Message.error("用户名或密码错误");
                this.isDisabled = false
              } else {

                axios.post("/member/findOne").then((res)=>{
                  localStorage.setItem('uId',res.member.id);
                  localStorage.setItem('id',res.member.id)
                })
                axios.get("/operationLog/loginOper").then(res => {
                  if (res._STATUS == 1) {
                    this.$Message.info("登陆成功");
                    this.$router.push({
                      name: "index"
                    });
                    this.isDisabled = false
                  }
                });
              }
            });
        }
      });
    },
    // 注册
    handleSubmit() {
      this.$refs.formValidateNew.validate(valid => {
        if (valid) {
          axios.post('/member/regist',{
              identifier:this.formValidateNew.phone,
              password:this.formValidateNew.password,
              code:this.formValidateNew.code,

          }).then((res)=>{
            if(res._STATUS ==1){
              this.$Message.success(res._MESSAGE);
              this.$refs['formValidateNew'].resetFields();
              this.tabsName = 'name1'
            }else{
              this.$Message.error(res._MESSAGE);
            }
          }).catch((err)=>{
            console.log(err)
          })
        } else {
          this.$Message.error("请填写完整!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    forgetPass(){
      this.modal1 = true
    }
  },
  created(){
    axios.get(libs.uploads2() + "member/islogin")
    // axios.get("/member/islogin")
      .then(res => {
        if(res._STATUS==0){
          // location.href = 'http://accounts.ahjdev.top/login/identifier?referer=http://localhost'
        }else{
          //  axios.post("http://api.ahjdev.top/member/identifier/lookup",{
           axios.post("/member/identifier/lookup",{
             identifier:res.Mobile
           }).then((res)=>{
            localStorage.setItem('uId',res.u.identifier)
              this.$router.push({
                name: "index"
              });
          })
        }
      });
  },
  
};
</script>

<style lang="less">
html,body{
  height: 100%;
}
.login {
  width: 100%;
  height: 100vh;
  background-image: url("../../assets/images/login-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin:0 auto;
  background-position: center;
  position: relative;
  display: flex;

  .ivu-input {
    height: 46px !important;
  }
  .ivu-input-icon {
    line-height: 45px;
  }
  .header {
    position: absolute;
    width: 100%;
    padding: 15px 0;
    background: white;

    img {
      margin-left: 33px;
    }
  }

  .footer {
    position: fixed;
    width: 100%;
    background: white;
    bottom: 0;
    text-align: center;
    padding: 20px 0;
  }
}

.login-con {
  width: 550px;
  margin: auto;

  .img-wrap {
    margin-top: 80px;
  }
}
.ivu-card-bordered{
  margin-bottom: 58px;
}

.login .one {
  font-size: 18px;
  font-family: MicrosoftYaHei;
  color: #515a6e;
  cursor: pointer;
  margin-bottom: 20px;
  display: inline-block;
  height: 40px;
}

.one:hover {
  border-bottom: 2px solid #2b85e4;
}

.one:visited {
  color: #17233d;
}

.hide {
  display: none;
}

.tab {
  height: 40px;
  border-bottom: 2px solid #dcdee2;
}

.martop {
  margin-top: 10px 0;
}

.login-title {
  width: 98%;
  padding-bottom: 35px;
  padding-left: 30px;
}

.forGetPassword {
  cursor: pointer;
  color: #ed4014;
  float: right;
  margin-right: 10px;
}
.ivu-form-item-error-tip{
  z-index: 10;
}
.ivu-input-group-append{
  cursor: pointer;
}
.ivu-card-body{
  padding: 0px;
}
.getpass:hover{
  color: #ed4014;
}
.registerStyle .ivu-form-item-error-tip {
    position: absolute;
    left: 0 !important;
    top: 46px !important;
}
</style>
